<template>
  <div class="password-page">
    <ResponsiveNav />

    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/account/security' }">
              <i class="fas fa-chevron-left"></i> {{ $t('返回登录与安全') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('修改密码') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="main-card">
        <h1 class="page-title">{{ $t('修改密码') }}</h1>

        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-position="top"
          class="password-form"
        >
          <el-form-item :label="$t('当前密码')" prop="currentPassword">
            <el-input
              v-model="form.currentPassword"
              type="password"
              :placeholder="$t('请输入当前密码')"
              show-password
            >
              <template #prefix>
                <i class="fas fa-lock"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item :label="$t('新密码')" prop="newPassword">
            <el-input
              v-model="form.newPassword"
              type="password"
              :placeholder="$t('请输入新密码')"
              show-password
            >
              <template #prefix>
                <i class="fas fa-key"></i>
              </template>
            </el-input>
            <div class="password-requirements">
              <p>{{ $t('密码要求') }}：</p>
              <ul>
                <li :class="{ valid: hasLength }">{{ $t('密码必须6-12个字符') }}</li>
              </ul>
            </div>
          </el-form-item>

          <el-form-item :label="$t('确认新密码')" prop="confirmPassword">
            <el-input
              v-model="form.confirmPassword"
              type="password"
              :placeholder="$t('请再次输入新密码')"
              show-password
            >
              <template #prefix>
                <i class="fas fa-key"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 底部按钮 -->
          <div class="form-actions">
            <el-button @click="handleCancel">{{ $t('取消') }}</el-button>
            <el-button
              type="primary"
              :loading="loading"
              @click="handleSubmit"
            >
              {{ $t('确认修改') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import Footer from '@/components/Footer.vue'
import { ApiUpdatePassword } from '@/api/mine'
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)

const form = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码强度校验
const hasLength = computed(() => /^.{6,12}$/.test(form.value.newPassword))

const validatePass = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(t('请输入密码')))
  } else if (!/^.{6,12}$/.test(value)) {
    callback(new Error(t('密码必须6-12个字符')))
  } else {
    callback()
  }
}

const validateConfirmPass = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(t('请再次输入密码')))
  } else if (value !== form.value.newPassword) {
    callback(new Error(t('两次输入密码不一致')))
  } else {
    callback()
  }
}

const rules: FormRules = {
  currentPassword: [
    { required: true, message: t('请输入当前密码'), trigger: 'blur' }
  ],
  newPassword: [
    { required: true, validator: validatePass, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPass, trigger: 'blur' }
  ]
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    // TODO: 调用修改密码API
    await ApiUpdatePassword({
      password: form.value.currentPassword,
      newPassword: form.value.newPassword
    })

    ElMessage.success(t('密码修改成功'))
    router.push('/account/security')
  } catch (error) {
    console.error('验证失败:', error)
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  router.push('/account/security')
}
</script>

<style lang="scss" scoped>
.password-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: 32px 24px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.page-title {
  font-size: 24px;
  color: #111;
  font-weight: 500;
  margin-bottom: 32px;
}

.password-form {
  max-width: 400px;
  margin: 0 auto;

  :deep(.el-form-item__label) {
    color: #333;
    font-weight: 500;
    padding-bottom: 8px;
  }

  :deep(.el-input__wrapper) {
    padding-left: 0;
  }

  :deep(.el-input__prefix) {
    width: 40px;
    justify-content: center;
    color: #999;
  }

  :deep(.el-input__inner) {
    padding-left: 40px;
  }
}

.password-requirements {
  margin-top: 16px;
  color: #666;
  font-size: 14px;

  p {
    margin-bottom: 8px;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
      color: #ff4d4f;

      &::before {
        content: '\f00d';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 8px;
        font-size: 12px;
      }

      &.valid {
        color: #52c41a;

        &::before {
          content: '\f00c';
        }
      }
    }
  }
}

.form-actions {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;

  .el-button {
    min-width: 100px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .main-card {
    padding: 24px 16px;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
}
</style>
